<template>
  <div class="auto-join-group-main">
    <div class="auto-join-group-head">
      <div class="head-title">
        任务列表
        <span class="alert-content">
          <svg-icon icon-class="warning-circle-fill-yellow" style="font-size: 16px;margin-top: 4px;margin-right: 8px;"></svg-icon>
          <span>查看已通过/待通过等群详细数据请至单号下查看</span>
        </span>
      </div>
      <div class="header-right">
        <el-button v-hasPermi="['system:joingroup:set']" size="small" @click="dialogVisible = true">批量设置</el-button>
      </div>
    </div>
    <div class="auto-join-group-container">
      <div class="table-container">
        <div class="table-head-search">
          <div class="search-rows">
            <el-select v-model="value" filterable placeholder="全部账号" size="small">
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
            <el-select v-model="value" filterable placeholder="分组" size="small">
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
            <el-autocomplete
              popper-class="account-list"
              v-model="state"
              :fetch-suggestions="querySearch"
              placeholder="全部企微号"
              @select="handleSelect">
              <template slot-scope="{ item }">
                <span class="name">{{ item.name }}</span>
                <span class="company">{{ `@${item.company}` }}</span>
              </template>
            </el-autocomplete>
          </div>
        </div>
        <el-table
          :data="tableData"
          style="width: 100%">
          <el-table-column
            type="selection"
            width="70">
          </el-table-column>
          <el-table-column
            prop="number"
            label="企微号">
            <template slot-scope="scope">
              <div class="company-account">
                <img class="account-cover" src="https://wework.qpic.cn/wwpic/177031_HhrnVYv6QQSgQ2C_1686909054/0" />
                <div class="account-info">
                  <div class="name">闵雨微</div>
                  <div class="desc">@志新</div>
                </div>
              </div>
            </template>
          </el-table-column>
          <el-table-column
            prop="task_status"
            label="自动接受群邀请状态"
            >
            <template slot-scope="scope">
              <div class="task-status">
                <span class="round open" />
                <span>开启</span>
              </div>
            </template>
          </el-table-column>
          <el-table-column
            prop="option"
            label="今日已接受群个数"
          >
          </el-table-column>
          <el-table-column
            prop="option"
          >
          <template slot="header">
            <div>
              每日接受群个数上限
              <el-tooltip class="item" effect="dark" placement="top">
                <div slot="content">每日达日上限后暂停接受，次日休眠<br/>时段外自动恢复继续自动接受。</div>
                <svg-icon icon-class="iquestion" style="margin-left: 8px;"/>
              </el-tooltip>
            </div>
          </template>
          </el-table-column>
          <el-table-column
            prop="option"
          >
          <template slot="header">
            <div>
              接受频率
              <el-tooltip class="item" effect="dark" placement="top">
                <div slot="content">两个群邀请接受的最小时间间隔。</div>
                <svg-icon icon-class="iquestion" style="margin-left: 8px;"/>
              </el-tooltip>
            </div>
          </template>
          <template slot-scope="scope">
            <div class="apply-lapse">
              5<span style="margin: 0 4px;">~</span>10s
            </div>
          </template>
          </el-table-column>
          <el-table-column
            prop="option"
            label="操作"
            width="260"
          >
          <template slot-scope="scope">
            <el-button v-hasPermi="['system:joingroup:settask']" type="text" size="small" @click="dialogVisible = true">设置</el-button>
            <el-button v-hasPermi="['system:joingroup:gosinge']" type="text" size="small" @click="acceptVisible = true">去单号模式</el-button>
          </template>
          </el-table-column>
          <template slot="empty">
            <TableEmpty />
          </template>
        </el-table>
      </div>
    </div>
    <SettingDialog  :visableIf.sync="dialogVisible" />
  </div>
</template>
<script>
import SettingDialog from './settingDialog.vue'

export default {
  data() {
    return {
      dialogVisible: false,
      options: [{
        value: 1,
        label: '未分组'
      }, {
        value: 2,
        label: '测试分组1'
      }, {
        value: 3,
        label: '测试分组2'
      }],
      tableData: [{id: 1, name: '1111'}],
      statuses: [{
        value: 1,
        label: '开启'
      }, {
        value: 2,
        label: '关闭'
      }],
      restaurants: [],
      state: ''
    }
  },
  components: {
    SettingDialog
  },
  mounted() {
    this.restaurants = this.loadAll();
  },
  methods: {
    onHandCloseDialog() {
      this.dialogVisible = false
    },
    onHandCloseAcceptDialog() {
      this.acceptVisible = false
    },
    onNavigationTo(path) {
      this.$router.push(path)
    },
    querySearch(queryString, cb) {
      var restaurants = this.restaurants;
      var results = queryString ? restaurants.filter(this.createFilter(queryString)) : restaurants;
      // 调用 callback 返回建议列表的数据
      cb(results);
    },
    createFilter(queryString) {
      return (restaurant) => {
        return (restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0);
      };
    },
    loadAll() {
      return [
        {name: '闵雨微', company: '锐行'},
        {name: '肖洁', company: '锐行'},
        {name: '肖成红', company: '锐行'},
        {name: '伍丽霞', company: '锐行'},
      ];
      },
    handleSelect(item) {
      console.log(item);
    },
    handleIconClick(ev) {
      console.log(ev);
    }
  }
}
</script>
<style lang="scss" scoped>
.auto-join-group-main {
  height: calc(100vh - 48px);
  overflow: auto;
  flex: 1 1;
  position: relative;
  .auto-join-group-head {
    height: 46px;
    background: #fff;
    border-bottom: 1px solid #e9e9e9;
    position: sticky;
    top: 0;
    z-index: 8;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 20px;
    .head-title {
      font-size: 14px;
      line-height: 22px;
      font-weight: 500;
      .alert-content {
        padding: 0 15px;
        font-weight: 400;
        font-size: 12px;
        color: rgba(0, 0, 0, .45);
      }
    }
    .divider {
      margin: 0 20px;
      width: 1px;
      height: 16px;
    }
  }
  .auto-join-group-container {
    margin: 12px 16px;
    padding: 12px;
    font-size: 14px;
    line-height: 22px;
    background: #ffffff;
    .config-tips {
      margin-bottom: 12px;
    }
    .table-container {
      .table-head-search {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 12px;
        .search-rows {
          display: grid;
          column-gap: 8px;
          grid-template-columns: 140px 120px 270px;
        }
        .status-button {
          line-height: 1.5715;
          position: relative;
          display: inline-block;
          font-weight: 400;
          white-space: nowrap;
          text-align: center;
          background-image: none;
          box-shadow: unset;
          cursor: pointer;
          transition: all .3s cubic-bezier(.645,.045,.355,1);
          user-select: none;
          touch-action: manipulation;
          height: 32px;
          padding: 4px 15px;
          font-size: 14px;
          border-radius: 4px;
          color: rgba(0, 0, 0, .65);
          border: 1px solid #e9e9e9;
          background: #fff;
            span {
              margin-left: 8px;
            }
        }
      }
      .company-account {
        display: flex;
        align-items: center;
        .account-cover {
          width: 40px;
          height: 40px;
        }
        .account-info {
          margin-left: 8px;
          .name {
            font-size: 14px;
            line-height: 22px;
            color: #222333;
          }
          .desc {
            color: #f08b00;
            line-height: 22px;
          }
        }
        .accept-account {
          font-size: 14px;
          line-height: 22px;
        }
      }
      .task-status {
        display: flex;
        align-items: center;
        font-size: 14px;
        line-height: 22px;
        .round {
          display: block;
          width: 8px;
          height: 8px;
          border-radius: 50%;
          margin-right: 4px;
          &.open {
            background: #52c41a;
          }
        }
      }
    }
  }
}
</style>
<style lang="scss">
.account-list {
  li {
    line-height: normal;
    padding: 7px;
    display: flex;
    align-items: center;
    font-weight: 400;
    font-size: 14px;
    line-height: 22px;
    .name {
      color: rgba(0, 0, 0, .65);
      &::before {
        display: inline-block;
        content: ' ';
        height: 6px;
        width: 6px;
        border-radius: 50%;
        background: rgba(0, 0, 0, 0.25);
        vertical-align: middle;
        margin-right: 4px;
      }
    }
    .company {
      color: rgb(240, 139, 0);
      margin-left: 4px;
    }
  }
}
</style>